<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ZPCode UI Kits</title>
  <link rel="stylesheet" href="http://zx4.com:8001/kits/css/zpcode.min.css">
  <link rel="stylesheet" href="./statics/highlight/styles/github-dark.min.css">
  <link rel="stylesheet" href="./statics/css/index.css">
  <!--zpcode.min.js-->
  <script src="http://zx4.com:8001/kits/webcomponents/ZPElement.js" type="module" defer></script>
  <script src="http://zx4.com:8001/kits/webcomponents/animate/loading/circle.js" type="module" defer></script>
  <script src="http://zx4.com:8001/kits/webcomponents/search/style01.js" type="module" defer></script>
  <!--zpcode.min.js-->
  <script src="./statics/webcomponents/layout/leftnav.js" type="module" defer></script>
  <script src="./statics/webcomponents/layout/footer.js" type="module" defer></script>
  <script src="./statics/js/index.js" type="module" defer></script>
  <script src="./statics/js/extra.js" type="module" defer></script>
</head>
<body class="dark">
  <div class="mih12p f">
    <left-nav current="intro"></left-nav>
    <div class="fa bl1" style="width:0">
      <div class="c ma mt48 pb48">
        <h1>👨‍💻 ZPCode Kits 介绍</h1>
        <hr>
        <p><b>ZPCode Kits</b> 是一个可自由构建的UI组件(动效)库，提供了基于 Web Component 标准的模块免费构建服务，帮助开发者高效开发用户界面。</p>
        <p>👇下面是一个简单的示例：</p>
        <pre class="pr"><code class="hljs language-xml al-circle-html-m"></code></pre>
        <p>👇效果展示：</p>
        <div class="quote f ja fw lh8 fs20">
          <al-circle type="groove"></al-circle>
        </div>
        <hr class="mt48 mb36">
        <h2 id="featrue"># 特点</h2>
        <p>一般的组件库，要么过于臃肿，要么构建复杂，要么无法局部引入自由组合。ZPCode Kits 解决了这些问题，库中的每个组件高度内聚，并通过组件属性或 CSS 变量进行穿透改变外貌。</p>
        <p>由于 ZPCode Kits 基于 Web Component 进行开发，因此您的浏览器需要 Web Component 的<a href="/startup/usage.html#compatibility">最低版本支持</a>。</p>

        <hr class="mt48 mb36">
        <h2 id="future"># 未来</h2>
        <p>ZPCode Kits 目前作为个人项目由<a href="https://zpcode.cn" target="_blank">ZPCode</a>创建，作者将尽量保持每周一更的状态，直至组件库达到满足大部分业务需求、更无可更的临界点，届时将更趋向于趣味性和页面级的组件方向进行开发。同时，现有的组件也会进行维护升级。</p>
        <p>ZPCode Kits 的构建服务完全免费，并承诺未来也不会收费。如果喜欢，请考虑<a href="https://zpcode.cn">赞助我们</a>，以支持 ZPCode Kits 的持续发展。</p>

        <hr class="mt48 mb36">
        <h2 id="contact"># 哪里可以找到我们</h2>
        <p>有任何疑问、建议，可以在 <a href="https://github.com">Github</a> 社区找到我们，您可以在上面提出您的 Issue，我们将尽可能地为您解答或解决问题。</p>
      </div>
      <zp-footer></zp-footer>
    </div>
    <div class="w200">
      <ul class="bl1 p0 mt48 pl24 ps t48 lh30">
        <li><a href="#" class="txt-con txt-p-h">介绍</a></li>
        <li><a href="#featrue" class="txt-con txt-p-h">特点</a></li>
        <li><a href="#future" class="txt-con txt-p-h">未来</a></li>
        <li><a href="#contact" class="txt-con txt-p-h">哪里可以找到我们</a></li>
        <li class="mt12"><a href="#" class="txt-cg txt-b-h fs12">▲ 顶部</a></li>
      </ul>
    </div>
  </div>
  <script src="./statics/highlight/highlight.min.js"></script>
  <script src="./statics/highlight/languages/xml.min.js"></script>
  <script src="./statics/highlight/languages/css.min.js"></script>
</body>
</html>